<template>
	<view class="content-header">
		<view class="order-top"></view>
		<view class="order-info flex-column">
			<view class="order-info-address flex-column">
				<view class="flex-row flex-content-between">
					<view class="flex-row order-info-address-text flex-item-center">
						<image src="../../static/user/yd.png" mode="scaleToFill"></image>
						<view>韵达快递 432908854179107</view>
					</view>
					<view class="flex-row order-info-address-text1">
						<view>复制</view>
						<view></view>
						<view>打电话</view>
					</view>
				</view>
				<view class="order-steps">
					<uni-steps :options="list" :active="active" direction="column" active-color="#FF7336"/>
				</view>
			</view>
		</view>
		<view class="order-top"></view>
		<view class="order-orderinfo">
			<view class="order-orderinfo-item">
				<view class="order-orderinfo-item-one flex-row flex-content-between">
					<view class="flex-row order-orderinfo-item-one-txt">
						<image src="../../static/index/banner11.png" mode="widthFix"></image>
						<view class="flex-column order-orderinfo-item-one-txt1">
							<view>鲜活大虾</view>
							<view>500g</view>
						</view>
					</view>
					<view class="flex-column order-orderinfo-item-one-txt2">
						<view>￥60</view>
						<view>x1</view>
					</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">商品总价</view>
					<view class="order-orderinfo-item-one-detal">￥60.00</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">运费</view>
					<view class="order-orderinfo-item-one-detal">￥6.00</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">实付款</view>
					<view class="order-orderinfo-item-one-detal col">￥66.00</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">订单编号：</view>
					<view class="order-orderinfo-item-one-detal1">1659898559888566998</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">创建时间：</view>
					<view class="order-orderinfo-item-one-detal1">2022-11-06 10:20:28</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">付款时间：</view>
					<view class="order-orderinfo-item-one-detal1">2022-11-06 10:20:28</view>
				</view>
				<view class="flex-row flex-content-between order-orderinfo-item-one-in">
					<view class="order-orderinfo-item-one-title">发货时间：</view>
					<view class="order-orderinfo-item-one-detal1">2022-11-06 10:20:28</view>
				</view>
			</view>
		</view>
		<view class="order-top"></view>
		<view class="order-wenti">
			<view class="order-wenti-header">
				<view class="flex-row flex-content-between">
					<view class="order-wenti-header-txt1">遇到问题？</view>
					<view class="flex-row flex-item-center order-wenti-header-txt2">
						<image src="../../static/index/dh.png" mode="scaleToFill"></image>
						<view>联系卖家</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				active:0,
				list:[
					{
						title:"运输中",
						desc:"从青海xx水产公司出发"
					},
					{
						title:"送至 吉龙三街266号",
						desc:"笑笑  86-136****6666"
					}
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.order-wenti-header-txt2{
		>image:nth-child(1){
			width: 33rpx;
			height: 33rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 20rpx;
		}
	}
	.order-wenti-header-txt1{
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.order-wenti-header{
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 26rpx;
	}
	.order-wenti{
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-left: 30rpx;
	}
	.col{
		color: $default-button-color !important;
	}
	.order-orderinfo-item-one-in{
		margin-top: 45rpx;
		margin-bottom: 5rpx;
	}
	.order-orderinfo-item-one-title{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.order-orderinfo-item-one-detal{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.order-orderinfo-item-one-detal1{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.order-orderinfo-item-one-txt2{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
			text-align: end;
		}
	}
	.order-orderinfo-item-one-txt{
		>image:nth-child(1){
			width: 144rpx;
		}
		>view:nth-child(2){
			margin-left: 20rpx;
		}
	}
	.order-orderinfo-item-one-txt1{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
		}
	}
	.order-orderinfo{
		width: 690rpx;
		height: 780rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		margin-left: 30rpx;
	}
	.order-orderinfo-item{
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-top: 20rpx;
		margin-bottom: 44rpx;
	}
	.order-steps{
		margin-left: 18rpx;
	}
	.order-info-address-text1{
		margin-top: 30rpx;
		margin-right: 20rpx;
		>view:nth-child(1){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		>view:nth-child(2){
			width: 0px;
			height: 20rpx;
			opacity: 1;
			border: 2rpx solid #CCCCCC;
			margin-left: 22rpx;
			margin-top: 8rpx;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-left: 20rpx;
		}
	}
	.order-info-address-text{
		margin-top: 30rpx;
		margin-left: 20rpx;
		>image:nth-child(1){
			width: 48rpx;
			height: 48rpx;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-left: 14rpx;
		}
	}
	.order-info{
		width: 690rpx;
		margin-left: 30rpx;
	}
	.order-info-address{
		width: 690rpx;
		// height: 310rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		padding-bottom: 20rpx;
	}
	.order-top{
		width: 750rpx;
		height: 20rpx;
	}
</style>